<template>
  <div class="type-tab">
    <div
      v-for="i in typeList"
      :key="i.type"
      :class="{ 'is__current': formGroup.type === i.type }"
      @click="formGroup.type = i.type; request()"
    >{{ i.name }}</div>
  </div>
  <div class="container">
    <div class="knowledge-tree">
      <ChapterTreeComponent :subject-code="subjectCode" @check-keys-change="formGroup.chapterId = $event; request()" />
    </div>
    <div class="section-main">
      <el-skeleton :loading="loading">
        <div class="box" v-if="dataset.length">
          <div class="cell" v-for="data in dataset" :key="data.id">
            <div class="cover"><el-image :src="`${filePathBase}${data.imgPath}`" fit="cover"></el-image></div>
            <p>{{ data.fileName }}</p>
            <div class="mask">
              <div class="btns">
                <div @click="preview(data)"><span>预览</span></div>
                <div @click="addData(1, data)"><span>加入</span></div>
              </div>
            </div>
          </div>
        </div>
        <cus-empty v-else />
        <el-pagination
          v-model:current-page="formGroup.current"
          v-model:page-size="formGroup.size"
          :total="formGroup.total"
          @current-change="request()"
          hide-on-single-page
          layout="prev, pager, next"
        />
      </el-skeleton>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType, reactive, ref } from 'vue'
import ChapterTreeComponent from './chapter-tree.vue';
import $ from '$';
import { ElLoading } from 'element-plus';

export default {
  props: {
    subjectCode: String,
    addData: Function as PropType<(id) => void>
  },
  components: { ChapterTreeComponent },
  setup() {

    let typeList = [
      { name: '全部', type: null },
      { name: '课件', type: 1 },
      { name: '讲义', type: 2 },
      { name: '标准教案', type: 5 },
      { name: '说课视频', type: 3 },
      { name: '多媒体', type: 6 },
      { name: '其他', type: 4 },
    ];

    let dataset = ref([]);
    let loading = ref(true);
    let filePathBase = import.meta.env.VITE_APP_BASE_URL;
    let formGroup = reactive({
      type: null,
      chapterId: [],
      current: 1,
      size: 30,
      total: 0,
      subject: $.storage.get('subject').code,
      order: 1,
      orderType: 0,
    })

    const request = async () => {
      loading.value = true;
      let res = await $.http.json('/admin/material/queryPage', { ...formGroup, isPublic: 1 })
      dataset.value = res.json.records;
      formGroup.total = res.json.total;
      loading.value = false;
    }
    request();

    const preview = async (data) => {
      /* 待添加是否为试卷判断------------------- */
      const loading = ElLoading.service({ lock: true, background: 'rgba(255, 255, 255, .7)', text: '加载中...' });
      let src = `${$.utils.generatBasePath()}furl=${import.meta.env.VITE_APP_BASE_URL}${data.filePath}`;

      let container: HTMLElement | null = null;
      let closeBtn = $.element('div', {
        className: 'el-icon-close',
        style: { width: '36px', height: '36px', lineHeight: '36px', textAlign: 'center', background: '#fff', borderRadius: '50%', fontSize: '24px', position: 'fixed', top: '40px', right: '40px', zIndex: '10', cursor: 'pointer' },
        on: { click: () => { container?.remove(); } }
      });
      if (data.ext === 'html') {
        loading.close();
        return;
      } else if (data.ext === 'mp3') {
        let video = $.element('video', {
          attrs: {
            src:`${import.meta.env.VITE_APP_BASE_URL}${data.filePath}`, width: '', height: '', controls: 'true', controlsList: "nodownload" },
            style: { background: '#333', position:'absolute', top: '50%', left: '50%', transform:'translate(-50%,-50%)'
          }
        });
        video.oncanplay = loading.close;
        video.onerror = loading.close;
        container = $.element('div', { style: { width: '100%', height: '100%', background: 'rgba(0,0,0,.8)', position: 'absolute', top: '0', left: '0', zIndex: '3000' } }, [ closeBtn, video ]);
      } else if (data.ext === 'mp4') {
        let video = $.element('video', { attrs: { src: `${import.meta.env.VITE_APP_BASE_URL}${data.filePath}`, width: '100%', height: '100%',controls: 'true', controlsList: "nodownload" }, style: { background: '#f9f9f9' }});
        video.oncanplay = loading.close;
        video.onerror = loading.close;
        container = $.element('div', { style: { width: '100%', height: '100%', position: 'absolute', top: '0', left: '0', zIndex: '3000' , background: 'rgba(0,0,0,.8)'} }, [ closeBtn, video ])
      } else if (['ppt', 'pptx', 'doc', 'docx', 'pdf'].includes(data.ext)) {
        let iframe = $.element('iframe', { attrs: { src, width: '100%', height: '100%', allowfullscreen: 'true' }, style: { background: '#f9f9f9' } });
        iframe.onload = loading.close;
        iframe.onerror = loading.close;
        container = $.element('div', {
          style: { width: '100%', height: '100%', position: 'absolute', top: '0', left: '0', zIndex: '3000', background: 'rgba(0,0,0,.8)' },
        }, [ closeBtn, iframe ]);
      } else if (['zip', 'rar', 'png', 'jpg', 'jpeg'].includes(data.ext)) {
        let iframe = $.element('iframe', { attrs: { src, width: '100%', height: '100%' }, style: { background: '#f9f9f9' } });
        iframe.onload = loading.close;
        iframe.onerror = loading.close;
        container = $.element('div', { style: { width: '100%', height: '100%', position: 'absolute', top: '0', left: '0', zIndex: '3000', background: 'rgba(0,0,0,.8)' } }, [ closeBtn, iframe ])
      }
      container && document.body.appendChild(container);
    }

    return { typeList, filePathBase, formGroup, dataset, loading, request, preview }
  }
}
</script>

<style lang="scss" scoped>
.type-tab {
  text-align: center;
  background: #F5F7FA;
  & > div {
    display: inline-block;
    padding: 0 12px;
    color: #77808D;
    line-height: 50px;
    position: relative;
    cursor: pointer;
    &.is__current {
      color: #72b22a;
      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background: #72b22a;
        border-radius: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
}

.container {
  flex: 1 1 115px;
  display: flex;
  &, & > div {
    overflow: auto;
  }
  .knowledge-tree {
    width: 250px;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
  }
  .section-main {
    flex: 1 1 250px;
    padding: 4px 7px 20px;
  }
}

.box {
  display: flex;
  flex-wrap: wrap;
  .cell {
    width: 130px;
    padding: 10px;
    margin: 0 10px 10px 0;
    position: relative;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .cover {
      height: 84px;
      margin-bottom: 6px;
      background: #D8D8D8;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      :deep(.el-image) {
        width: 100%;
        height: 100%;
      }
    }
    & > p {
      text-align: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .mask {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: rgba($color: #000, $alpha: .15);
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: all .25s;
      .btns {
        width: 84px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        div {
          color: #72b22a;
          font-size: 12px;
          line-height: 24px;
          text-align: center;
          border-radius: 12px;
          background: #fff;
          cursor: pointer;
          &:last-child {
            margin-top: 10px;
          }
          &:active {
            opacity: .8;
          }
        }
      }
    }
    &:hover {
      .mask {
        opacity: 1;
      }
    }
  }
}
</style>
